<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>  
<html>  
<head>       
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />  
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />       
   <title>本地图片预览</title>       
   <style type="text/css">  
		#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}  
		#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}  
	</style>  
	<script type="text/javascript">
	<!--  
	function previewImage(file){  
	  var MAXWIDTH  = 100;  
	  var MAXHEIGHT = 100;  
	  var div = document.getElementById('preview');
	  if (file.files && file.files[0]){  
	    div.innerHTML = '<img id=imghead>';  
	    var img = document.getElementById('imghead');  
	    img.onload = function(){  
	      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
	      img.width = rect.width;  
	      img.height = rect.height;  
	      img.style.marginLeft = rect.left+'px';  
	      img.style.marginTop = rect.top+'px';  
	    }  
	    var reader = new FileReader();  
	    reader.onload = function(evt){img.src = evt.target.result;}  
	    reader.readAsDataURL(file.files[0]);  
	  }else{  
	    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';  
			file.select();
			div.focus();
		var src = document.selection.createRange().text; 
	    div.innerHTML = '<img id=imghead>';  
	    var img = document.getElementById('imghead');  
	    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;  
	    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);  
	    status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);  
	    /*div.innerHTML = "<div id=divhead style='width:"
		    +rect.width+"px;height:"
		    +rect.height+"px;margin-top:"
		    +rect.top+"px;margin-left:"
		    +rect.left+"px;"
		    +sFilter+src
		    +"\"'></div>";  */
		div.innerHTML = "<div id=divhead style='width:"
		    +200+"px;height:"
		    +200+"px;margin-top:"
		    +3+"px;margin-left:"
		    +3+"px;"
		    +sFilter+src
		    +"\"'></div>";  
	  }  
	}  
	function clacImgZoomParam( maxWidth, maxHeight, width, height ){  
	    var param = {top:0, left:0, width:width, height:height};  
	    if( width>maxWidth || height>maxHeight )  
	    {  
	        rateWidth = width / maxWidth;  
	        rateHeight = height / maxHeight;  
	        if( rateWidth > rateHeight )  
	        {  
	            param.width =  maxWidth;  
	            param.height = Math.round(height / rateWidth);  
	        }else  
	        {  
	            param.width = Math.round(width / rateHeight);  
	            param.height = maxHeight;  
	        }  
	    }  
	    param.left = Math.round((maxWidth - param.width) / 2);  
	    param.top = Math.round((maxHeight - param.height) / 2);  
	    return param;  
	}  
	-->
	</script>       
</head>       
<body>  
<div id="preview">  
    <img id="imghead" width=100 height=100 border=0 src='../images/head01_big.jpg'>  
</div>  
    <br/>       
    <input type="file" onchange="previewImage(this)" />       
</body>       
</html>      